<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品交接页面</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <script
            src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
            crossorigin="anonymous"></script>

</head>
<body>
<div id="app">

    <div style="margin-top:5px;margin-right:15px;padding: 12px;margin-bottom: 5px;">
        <span>
            交接单查询:
            <el-input
                    v-model="searchOrder"
                    placeholder="请输入订单编号"
                    style="width: 200px;height:60px;">
            </el-input>

        </span>
        <span style="width: 60px;display: inline-block">
            &nbsp;&nbsp;&nbsp;
        </span>

        <span>
            入库时间:
            <el-input
                    type="date"
                    style="width: 200px;height:60px;"
                    placeholder="请选择日期"
                    suffix-icon="el-icon-date"
                    v-model="searchTime">
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </span>

    </div>

    <!-- 表单模态框区域 添加交接表-->
    <el-button type="primary" @click="clearSelect" ><i class="el-icon-plus">添加交接表</i></el-button>

    <!--  打印订单  -->
    <el-button type="primary" icon="el-icon-printer">打印交接单</el-button>

    <!--  批量删除   -->
    <el-button type="danger" @click="deleteMore"><i class="el-icon-delete-solid">批量删除</i></el-button>




    <el-dialog title="交接单" :visible.sync="dialogFormVisible" @close="closeDialog">
<!--        <el-select v-model="menus.data" clearable :placeholder="selectMenu" @change="checkMenu">-->
<!--            <el-option-->
<!--                    v-for="menu in menus"-->
<!--                    :key="menu.wareName"-->
<!--                    :label="menu.wareName"-->
<!--                    :value="menu.id">-->
<!--            </el-option>-->
<!--        </el-select>-->

<!--        <el-select v-model="orderId" clearable placeholder="请选择订单序号" @change="selectOrder">-->
<!--            <el-option-->
<!--                    v-for="pro in productOrders"-->
<!--                    :key="pro.id"-->
<!--                    :label="pro.id"-->
<!--                    :value="pro.id">-->
<!--            </el-option>-->
<!--        </el-select>-->
<!--        <el-form :model="currentOrder">-->
<!--            <el-form-item label="订单编号">-->
<!--                <el-input :disabled="true"  v-model="currentOrder.orderId" autocomplete="off" ></el-input>-->
<!--            </el-form-item>-->
<!--        </el-form>-->


        <el-select v-model="orderId" placeholder="请选择订单序号" @change="selectOrder">
            <el-option
                    v-for="pro in productOrders"
                    :key="pro.id"
                    :label="pro.orderId"
                    :value="pro.id">
                <span style="float: right; color: #8492a6; font-size: 13px">序号:{{ pro.id }}</span>
                <span style="float: left">订单编号:{{ pro.orderId }}</span>
            </el-option>
        </el-select>



        <el-select v-model="menus.data" clearable :placeholder="selectMenu" @change="checkMenu">
            <el-option
                    v-for="menu in menus"
                    :key="menu.wareName"
                    :label="menu.wareName"
                    :value="menu.id">
            </el-option>
        </el-select>





        <el-select v-model="staffs.data" clearable :placeholder="selectStaff"  @change="checkStaff">
            <el-option
                    v-for="menu in menus"
                    :key="menu.person"
                    :label="menu.person"
                    :value="menu.person"
                     >
            </el-option>
        </el-select>


<!--        <el-select v-model="commodities.data" clearable :placeholder="selectCommodity" @change="checkCommodity">-->
<!--            <el-option-->
<!--                    v-for="commodity in commodities"-->
<!--                    :key="commodity.pname"-->
<!--                    :label="commodity.pname"-->
<!--                    :value="commodity.id">-->
<!--            </el-option>-->
<!--        </el-select>-->

        <el-select v-model="departments.data" clearable :placeholder="selectDepartment" @change="checkDepartment">
            <el-option
                    v-for="department in departments"
                    :key="department.dname"
                    :label="department.dname"
                    :value="department.id">
            </el-option>
        </el-select>


        <el-form :model="currentCommodity">
            <el-form-item label="商品名称">
                <el-input :disabled="true" @change="checkCommodity" label="currentCommodity.pname" v-model="currentCommodity.pname" autocomplete="off" ></el-input>
            </el-form-item>
        </el-form>

        <el-form :model="productHandover">
            <el-form-item label="入库数量">
                <el-input  lable="productHandover.num" v-model="productHandover.num"  autocomplete="off" ></el-input>
            </el-form-item>
        </el-form>



        <el-form :model="productHandover">
            <el-form-item label="交接时间">
                <el-input v-model="productHandover.handover_date"  @change="checkTime" type="datetime-local" autocomplete="off">

                </el-input>
            </el-form-item>
        </el-form>

<!--                <input type="datetime-local">-->


        <el-form :model="productHandover">
            <el-form-item label="备注">
                <el-input v-model="productHandover.remoke" @change="checkRemoke" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <el-form :model="currentOrder">
            <el-form-item label="订单状态">
                <el-input  v-model="currentOrder.productStatus" @change="checkState" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="currentOrder">
            <el-form-item label="订单类型">
                <el-input  v-model="currentOrder.orderStatus" @change="checkType" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>



        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveProHandover">确 定</el-button>
        </div>
    </el-dialog>






            <el-table
            :data="productHandovers"
            style="width: 100%"
            @select="selectProHandover"
            @select-all="selectAllProHandover"
            ref="proHandoverTable">
        <el-table-column
                type="selection"
                width="55"
               >
        </el-table-column>
        <el-table-column
                label="交接编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>

                <el-table-column
                        label="订单编号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.productOrder.orderId }}</span>
                    </template>
                </el-table-column>

        <el-table-column
                label="产品名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.commodity.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品型号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.commodity.penterprise }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产部门">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.department.dname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="收货仓库">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.menu.wareName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="入库数量">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.menu.cargoNum }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交接日期">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.handoverDate }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交接人">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.head }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="备注">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.remoke }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.state }}</span>
            </template>
        </el-table-column>

                <el-table-column
                        label="订单类型">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.type }}</span>
                    </template>
                </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
<!--                <el-button-->
<!--                        size="mini"-->
<!--                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<!--                <el-switch-->
<!--                        @change="handleSwitch"-->
<!--                        value="false">-->
<!--                </el-switch>-->

                <div style="padding: 3px;margin: 3px">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleChangeType(scope.$index, scope.row)">
                        入库
                    </el-button>

                </div>

                <div style="padding: 3px;margin: 3px">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row.id)">
                        删除
                    </el-button>
                </div>

            </template>
        </el-table-column>
    </el-table>


    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[4,8,10,20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>
<script>
    Vue.filter('fmtdate',(v)=>{
        return moment(v).format('yyyy-MM-DD')
    })
    new Vue({
        el:"#app",
        data(){
            return {
                // 搜索订单
                searchOrder:"",
                // 通过时间搜索
                searchTime:"",
                // 交接人
                person:"",
                // 开关
                isave:false,
                // 当前商品
                currentCommodity:{id:"",pNumber:"",pName:"",pPrice:"",pEnterprise:"",
                pAddtime:"",aStatus:"",pStatus:"",companyId:"",pLocal:"",
                pShelflife:"",pMaterial:"",pBrand:"",p_quality:""},
                //当前订单id
                orderId:"",
                // 当前订单
                currentOrder:{},
                // 订单集合
                productOrders:[],
                // 订单编号
                orderIds:[],
                // 修改的id
                updateId:0,
                // 批量删除id数组
                deleteIdArr:[],
                // 当前交接单
                currentPro:{},
                // 交接单列表
                productHandovers:[],
                // 新增交接单
                productHandover:{id:"",depot_id:"",num:0,handover_date:"",
                head:"",remoke:"",state:"",type:"",department_id:"",commodity_id:"",order_id:""},
                // 仓库的下拉菜单选项
                menus:[],
                // 交接人下拉菜单选项
                staffs:[],
                // 商品下拉菜单选项
                commodities:[],
                // 部门下拉菜单选项
                departments:[],
                remoke:"",
                time:"",
                num:"",
                state:"",
                type:"",
                menu_id:"",
                department_id:"",
                commodity_id:"",
                staff_id:"",

                total:0,
                current:1,
                pageSize:4,
                // 编辑下拉菜单
                selectMenu:"请选择仓库",
                selectStaff:"请选择交接人",
                selectCommodity:"请选择商品",
                selectDepartment:"请选择部门",
                dialogFormVisible:false, //控制弹出框的显示

            }
        } ,
        methods:{

            changeStatus(index,row){
                console.log(index)
                console.log(row)
            },

            // 模糊查询
            search(){
                console.log("order"+this.searchOrder);
                console.log("time"+this.searchTime);
                this.loadProductHandOver();
            },

            //分页查询
            loadProductHandOver(current){

                axios.get("/ProductHandoverLike?current="+this.current+"&pageSize="+this.pageSize+"&orderId="+this.searchOrder+"&time="+this.searchTime)
                    .then(res =>{
                        this.deleteIdArr = [];
                        console.log(res.data)
                        this.productHandovers = res.data.data;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.deleteIdArr = [];
                this.loadProductHandOver(this.current)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.deleteIdArr = [];
                this.current=val;
                this.loadProductHandOver(this.current)
            },
            // 查询所有的仓库
            loadMenus(){
                axios.get("/menus")
                    .then(res =>{
                        console.log(res.data)
                        this.menus = res.data;
                        console.log("aaaaaa")
                        console.log(this.menus)
                    });
            },
            // 查询所有的交接人
            loadStaff(){
                axios.get("/staff")
                    .then(res =>{
                        console.log(res.data)
                        this.staffs = res.data;
                        console.log("staff")
                        console.log(this.staffs)
                    });
            },
            // 查询所有的商品
            loadCommodity(){
                axios.get("/commodities")
                    .then(res =>{
                        console.log(res.data)
                        this.commodities = res.data;
                        console.log("aaaaaa")
                        console.log(this.commodities)
                    });
            },

            // 选择订单
            selectOrder(){
                axios.get("/productOrder/"+this.orderId)
                    .then(res =>{
                        this.currentCommodity = res.data.commodity;
                        console.log(this.currentCommodity)
                       this.currentOrder = res.data;
                       console.log("currentOrder"+this.currentOrder)
                       console.log(this.currentOrder)
                       this.productHandover.num = res.data.number;

                    });
            },


            // 查询所有的部门
            loadDepartment(){
                axios.get("/departments")
                    .then(res =>{
                        console.log(res.data)
                        this.departments = res.data;
                        console.log("aaaaaa")
                        console.log(this.departments)
                    });
            },

            checkStaff(staff_id){
                console.log("staff_id"+staff_id)
                this.person=staff_id;
                return this.person;
            },
            checkCommodity(commodity_id){
                console.log("commodity_id"+commodity_id)
                this.commodity_id=commodity_id;
                return commodity_id;
            },
            checkDepartment(department_id){
                console.log("department_id"+department_id)
                this.department_id=department_id;
                return department_id;
            },
            checkMenu(menu_id){
                console.log("menu_id"+menu_id)
                this.menu_id=menu_id;
                return menu_id;
            },
            checkType(type){
                console.log(type);
                this.type=type;
                return type;
            },
            checkState(state){
                console.log(state);
                this.state=state;
                return state;
            },
            checkNum(num){
                console.log(num);
                this.num=num;
                return num;
            },
            checkTime(time){
                console.log(time);
                this.time=time;
                return time;
            },



            checkRemoke(remoke){
                console.log(remoke);
                this.remoke=remoke;
                return remoke;
            },



            handleSwitch(val){
                val = !val;
               console.log(val)
            },

            handleChangeType(index, row){
                this.$message({
                    showClose: true,
                    message: '恭喜你，已成功入库',
                    type: 'success'
                });
                console.log(row.id);
                axios.put("/state/"+row.id)
                    .then(res => {
                        //成功后关闭对话框和添加数据
                        if (res.data == "ok") {
                            this.clearForm();
                            this.loadMenus();
                            this.loadStaff();
                            this.loadCommodity();
                            this.loadDepartment();
                            this.loadProductHandOver(1);
                        }
                    })
            },


            //显示更新的角色
            handleEdit(index, row) {
                this.updateId = row.id;
                this.productHandover.num = row.num;
                this.productHandover.state = row.state;
                this.productHandover.remoke = row.remoke;
                this.productHandover.type = row.type;
                this.selectMenu = row.menu.wareName;
                this.selectStaff = row.menu.person;
                this.selectCommodity = row.commodity.pname;
                this.selectDepartment = row.department.dname;
                this.dialogFormVisible = true;
            },

            // 添加用户时候 清空下拉框的选择
            clearSelect(){
                this.dialogFormVisible = true
                this.selectMenu = "请选择仓库";
                this.selectStaff = "请选交接人";
                this.selectCommodity = "请选商品";
                this.selectDepartment = "请选部门";
            },
            //保存交接表
            saveProHandover(){

                // 时间类型转换
                let data= new Date(this.time).toJSON();
                let creationTimeStr= new Date(+new Date(data) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
                console.log("newTime")
                console.log(creationTimeStr)

                console.log(this.productHandover.num)
                let proHandover={id:0,depotId:this.menu_id,num:this.productHandover.num,handoverDate:creationTimeStr,
                    head:this.person,remoke:this.remoke,state:this.currentOrder.productStatus,type:this.currentOrder.orderStatus,departmentId:this.department_id,
                    commodityId:this.currentCommodity.id,orderId: this.orderId}  ;
                console.log(proHandover);
                // 如果id是0 则是添加交接单 否则是修改交接单
                if (this.updateId == 0){
                    let pro = JSON.parse(JSON.stringify(proHandover));
                    axios.post("/ProductHandover",pro)
                        .then(res => {
                            //成功后关闭对话框和添加数据
                            if (res.data == "ok") {
                                this.clearForm();
                                this.loadMenus();
                                this.loadStaff();
                                this.loadCommodity();
                                this.loadDepartment();
                                this.dialogFormVisible = false;
                                this.loadProductHandOver(1);
                                this.$message({
                                    message: '订单交接成功！',
                                    type: 'success'
                                });
                            }else {
                                this.$message({
                                    showClose: true,
                                    message: '你已经添加过此订单，请勿重复添加!',
                                    type: 'error',
                                    offset: 120
                                });

                            }
                        })
                }else {
                    let proHandover={id:this.updateId,depotId:this.menu_id,num:this.productHandover.num,handoverDate:this.time,
                        head:this.staff_id,remoke:this.remoke,state:this.state,type:this.type,departmentId:this.department_id,
                        commodityId:this.commodity_id}  ;
                    console.log(proHandover);
                    let pro = JSON.parse(JSON.stringify(proHandover));
                    axios.put("/ProductHandover",pro)
                        .then(res => {
                            //成功后关闭对话框和添加数据
                            if (res.data == "ok") {
                                this.clearForm();
                                this.loadMenus();
                                this.loadStaff();
                                this.loadCommodity();
                                this.loadDepartment();
                                this.dialogFormVisible = false;
                                this.loadProductHandOver(1);
                            }
                        })

                }



            },


            // 删除单个交接单
            handleDelete(index, rowId) {
                this.$confirm("此操作将删除信息，是否继续？","提示",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                    type:'warning'
                }).then(async()=>{
                        axios.delete("/ProductHandover/"+rowId)
                            .then(res =>{
                                if(res.data == "ok"){
                                    this.$message("删除成功!");
                                    this.total = this.total-1;
                                    this.loadProductHandOver(1);
                                }
                            });
                })
                console.log("rowId"+rowId)



            },


            // 数组去重
            newArr(arr){
            for(let i=0;i<arr.length;i++){
                for(let j=i+1;j<arr.length;j++){
                if(arr[i]==arr[j]){
                    //如果第一个等于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
        return arr;
            },

            // 关闭对话框清空内容
            closeDialog(){
                this.updateId = 0;
                this.productHandover={id:"0",depot_id:"",num:"",handover_date:"",
                    head:"",remoke:"",state:"",type:"",department_id:"",commodity_id:""};
                // this.clearForm();
                // this.selectMenu = "";
                // this.selectStaff = "";
                // this.selectCommodity = "";
                // this.selectDepartment = "";
            },

            // // 全选
            selectAllProHandover(selection){
                // 清空数组然后赋值
                this.deleteIdArr = [];
                for (let i = 0; i < selection.length; i++) {
                    console.log(selection[i].id)
                    this.deleteIdArr[i] = selection[i].id;
                }


            },

            //选择交接单
            selectProHandover(selection,row){
                console.log("selection"+selection)
                this.currentPro = row;
                // //全部取消
                // this.$refs.proHandoverTable.clearSelection();
                //选中当前行
                // this.$refs.proHandoverTable.toggleRowSelection(this.currentPro);
                // 如果点击存在了该id则删除
                if (this.deleteIdArr.indexOf(this.currentPro.id)==-1?false:true){
                    console.log("当前数组为"+this.deleteIdArr)
                    console.log("当前要删除数组索引为"+this.deleteIdArr.indexOf(this.currentPro.id))
                    this.deleteIdArr.splice(this.deleteIdArr.indexOf(this.currentPro.id),1);

                }else {
                    // 否则添加进入数组
                    this.deleteIdArr.push(this.currentPro.id);
                }
                console.log("------")
                console.log("当前数组为"+this.deleteIdArr)
            },



            // 批量删除
            deleteMore(){
                let deleteIdArr = JSON.stringify(this.deleteIdArr);
                console.log(deleteIdArr)
                // axios.delete("/ProductHandovers",deleteIdArr)
                //     .then(res =>{
                //         if(res.data == "ok"){
                //             this.loadProductHandOver(1);
                //         }
                //     });
                this.$confirm("此操作将删除信息，是否继续？","提示",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                    type:'warning'}).then(async()=>{

                    if (this.deleteIdArr.length == 0){
                        this.$message("你还没有选择要删除的交接单!");
                    }else {
                        $.ajax({
                            url: "/ProductHandovers",
                            type: 'DELETE',
                            data: JSON.stringify(this.deleteIdArr),
                            contentType: 'application/json;charset=UTF-8',
                            success: function (resultData) {
                                if (resultData="ok"){
                                    location.href="http://localhost:8080/page/productHandover/list.html";
                                    this.loadProductHandOver(1);
                                }
                            },
                            error: function () {
                                this.$message("你还没有选择要删除的交接单!");
                            }
                        });
                    }


                        });



            },

            // 查询所有订单
            loadProOrders(){
                axios.get("/productOrders")
                    .then(res=>{
                        let arr = [];
                        this.productOrders = res.data;
                        for (let i = 0; i < res.data.length; i++) {
                                arr.push(res.data[i].id);
                                console.log("ids"+res.data.id);
                        }
                        this.orderIds = arr;
                        console.log(arr)
                        console.log(res.data)
                        console.log("productOrders"+this.productOrders)
                        console.log("Ids"+this.orderIds)
                    })
            },



            // // 确认提交后清空数据
            clearForm(){
                this.staffs = [];
                this.menus = [];
                this.departments = [];
                this.commodities = [];
                this.productHandover = {};
                // this.updateId = 0;
                // this.productHandover.num = "";
                // this.productHandover.state = "";
                // this.productHandover.remoke = "";
                // this.productHandover.type = "";
                // this.productHandover.handover_date = "";
                // this.selectMenu = "";
                // this.selectStaff = "";
                // this.selectCommodity = "";
                // this.selectDepartment = "";
            },


                            // saveProHandover(){
            //     let productHandover = JSON.parse(JSON.stringify(this.productHandover));
            //     let head = JSON.parse(JSON.stringify(this.head));
            //     let menu = JSON.parse(JSON.stringify(this.head));
            //     console.log(user)
            //     //通过id判断是否是添加或更新操作
            //     if(user.id == 0){
            //         //发送数据给后台添加
            //         axios.post("/user",user)
            //             .then(res => {
            //                 //成功后关闭对话框和添加数据
            //                 if(res.data == "ok"){
            //                     this.dialogFormVisible = false;
            //                     this.loadUsers(1);
            //                 }
            //             })}else{
            //         //发送数据给后台更新
            //         axios.put("/user",user)
            //             .then(res => {
            //                 //成功后关闭对话框和添加数据
            //                 if(res.data == "ok"){
            //                     this.dialogFormVisible = false;
            //                     this.loadUsers(1);
            //                 }
            //             });
            //     }
            // },




        },
        mounted(){
            this.loadProductHandOver(1);
            this.loadMenus();
            this.loadStaff();
            this.loadCommodity();
            this.loadDepartment();
            this.handleCurrentChange(2);
            this.loadProOrders();
        }


    });

</script>
</body>
</html>